<script setup lang="ts">
import dayjs from 'dayjs'
import { fetchCouponDetailAPI } from '@/apis/fetchCouponDetail'
import { useUserInfoStore } from '@/store/userInfo'

const userInfoStore = useUserInfoStore()

const loading = ref(false)
const detail = ref<CouponDetail | null>(null)

onLoad(async (options) => {
  if (options && options.id) {
    try {
      loading.value = true
      const res = await fetchCouponDetailAPI({ id: options.id }, userInfoStore.userInfo!.token!)
      if (res.data?.code === 1) {
        detail.value = res.data.data
        loading.value = true
      }
      else { uni.showToast({ title: res.data?.msg, icon: 'none' }) }
    }
    catch (err) {
      uni.showToast({ title: JSON.stringify(err), icon: 'none' })
    }
  }
})

const classificateName = computed(() => {
  if (detail.value)
    return ['新人券', '员工券', '普通券'][detail.value.classificate! - 1]
  else
    return '未知'
})

function handleCopy() {
  uni.setClipboardData({
    data: `${detail.value?.coupon_num}`,
  })
}
</script>

<template>
  <view class="min-h-screen bg-#F8F8F8">
    <!-- 渐变背景 -->
    <view class="absolute left-0 top-0 h-990rpx w-screen from-#4999F7 to-#78D9FE to-opacity-0 bg-gradient-to-b" />
    <Spacer height="48" />
    <!-- 优惠券状态 START -->
    <view class="relative z-1 flex px-44rpx">
      <image class="my-8rpx h-40rpx w-40rpx" src="@/static/images/clock_outline.png" />
      <Spacer width="12" />
      <view>
        <view class="text-40rpx text-white font-semibold leading-56rpx">
          {{ '待使用' }}
        </view>
        <Spacer height="4" />
        <view class="text-28rpx text-white leading-40rpx">
          有效期：{{ dayjs(detail?.validate_start_time).format('YYYY-MM-DD') || '未知' }}-{{ dayjs(detail?.validate_end_time).format('YYYY-MM-DD') || '未知' }}
        </view>
      </view>
    </view>
    <!-- 优惠券状态 END -->
    <Spacer height="62" />
    <!-- 二维码卡片 START -->
    <view class="relative z-1 mx-44rpx flex flex-col items-center overflow-hidden rounded-20rpx bg-white">
      <view class="flex items-center">
        <view class="h-186rpx w-210rpx flex flex-col items-center justify-center">
          <view v-if="detail?.type.toString() === '1'" class="flex items-baseline">
            <view class="text-42rpx text-#333333 font-semibold">
              ¥
            </view>
            <view class="text-60rpx text-#333333 font-semibold leading-80rpx">
              {{ detail.complete_money || '0' }}
            </view>
          </view>
          <view v-else>
            <view class="text-60rpx text-#333333 font-semibold leading-80rpx">
              {{ detail?.discount || '0' }}折
            </view>
          </view>
          <view class="text-20rpx text-#333333 font-semibold leading-28rpx">
            满{{ detail?.money || '0' }}元可用
          </view>
        </view>
        <view class="h-92rpx w-2rpx bg-#333333 bg-opacity-20" />
        <view class="h-186rpx w-450rpx flex flex-col justify-center px-54rpx">
          <view class="text-32rpx text-#333333 font-semibold leading-42rpx">
            {{ classificateName || '未知' }}
          </view>
          <Spacer height="8" />
          <view class="text-24rpx text-#333333 font-semibold leading-32rpx">
            有效期 {{ dayjs(detail?.validate_start_time).format('YYYY-MM-DD') || '未知' }}-{{ dayjs(detail?.validate_end_time).format('YYYY-MM-DD') || '未知' }}
          </view>
        </view>
      </view>
      <Divider width="582" color="#333333" />
      <Spacer height="80" />
      <!-- 二维码 -->
      <uv-image width="360rpx" height="360rpx" :src="detail?.qrcode">
        <template #loading>
          <uv-loading-icon color="#666666" />
        </template>
      </uv-image>
      <Spacer height="40" />
      <!-- 券码小字 -->
      <view class="flex items-center text-24rpx font-semibold leading-32rpx">
        <text class="text-#333333">
          券码：{{ detail?.coupon_num || '未知' }}
        </text>
        <Spacer width="20" />
        <text class="text-#4999F7 underline-#4999F7" @tap="handleCopy">
          复制
        </text>
      </view>
      <Spacer height="80" />
      <Divider width="582" color="#333333" />
      <Spacer height="80" />
      <view class="w-full px-40rpx">
        <view class="flex">
          <view class="text-24rpx text-#333333 font-medium leading-32rpx">
            领取时间：
          </view>
          <view class="text-24rpx text-#848484 leading-32rpx">
            {{ detail?.create_time || '未知' }}
          </view>
        </view>
        <Spacer height="24" />
        <view class="flex">
          <view class="flex flex-shrink-0 text-24rpx text-#333333 font-medium leading-32rpx">
            使用说明：
          </view>
          <view class="text-24rpx text-#848484 leading-32rpx">
            {{ detail?.explain }}
          </view>
        </view>
      </view>
      <!-- 两个半圆 看起来像裁剪了卡片 -->
      <view class="absolute top-171rpx h-32rpx w-32rpx rounded-full bg-#92BEF8 -left-16rpx" />
      <view class="absolute top-171rpx h-32rpx w-32rpx rounded-full bg-#92BEF8 -right-16rpx" />
      <Spacer height="76" />
    </view>
    <!-- 二维码卡片 END -->
    <Spacer height="140" />
  </view>
  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'couponQRCode'
style:
  navigationBarTitleText: '使用优惠券'
layout: 'custom'
</route>
